<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>重置密码</el-breadcrumb-item>
    </el-breadcrumb>

    <h4>修改密码</h4>
    <!-- 用户资料填写区域 -->
    <el-form label-position="right" label-width="80px" :model="formUserInfo" class="useinfoForm">
      <el-form-item label="原密码">
        <el-input v-model="formUserInfo.oldPwd" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="formUserInfo.newPwd" type="password"></el-input>
      </el-form-item>
      <el-button class="btn1" type="success" @click="submit">提交</el-button>
      <el-button class="btn2" type="info" @click="reset">重置</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Userinfo',
  data() {
    return {
      formUserInfo: {
        oldPwd: '',
        newPwd: '',
        id: '',
      },
    }
  },
  // 生命周期函数 打开页面即调用
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const { data: res } = await this.$http.get('my/userinfo')
      if (res.status !== 0) return this.$message.error(res.message)
      this.formUserInfo.id = res.data.id
    },
    async submit() {
      let params = new URLSearchParams()
      params.append('oldPwd', this.formUserInfo.oldPwd)
      params.append('newPwd', this.formUserInfo.newPwd)
      params.append('id', this.formUserInfo.id)
      const { data: res } = await this.$http.post('my/updatepwd', params)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
    },
    reset() {
      this.formUserInfo.oldPwd = ''
      this.formUserInfo.newPwd = ''
    },
  },
}
</script>

<style>
.useinfoForm {
  margin-top: 50px;
}
.btn1 {
  width: 150px;
  height: 36px;
  float: left;
  margin-top: 15px;
  margin-left: 100px;
}
.btn2 {
  width: 150px;
  height: 36px;
  float: left;
  margin-top: 15px;
  margin-left: 280px;
}
</style>
